<template>
  <div class="source-card">
    <div class="source-card-wrap">
      <div v-for="item in data" :key="item.id" @click="handleOpen(item)" class="source-card-item">
        <img :src="getImgUrl(item.resourceImg)" alt="">
        <div class="source-card-item-score text-hidden-exp">
          <span class="source-card-item-num">{{ item.resourceScore }}</span>
          <span class="source-card-item-title text-hidden-exp">{{ item.resourceName }}</span>
        </div>
        <div class="source-card-item-tag text-hidden-exp">{{ handleTag(item.resourceTags) }}</div>
      </div>
    </div>
  </div>
</template>

<script setup name="SourceCard">

import {getImgUrl} from "../../../utils/ruoyi.js";

const props = defineProps({
  modelValue: String,
  title: String,
  data: Array,
})

const emit = defineEmits(['update:modelValue'])

const {data} = toRefs(props);

const loading = ref(false);

const activeBtn = ref('');

const cdList = ref([
  {
    tagName: '动作'
  }
]);

const handleModify = (row) => {
  console.log(row, '当前行数据')
}

const handleTag = (tag) => {
  if (tag && tag.length > 0) {
    return tag.replaceAll(',', ' ').replaceAll('，', ' ');
  }
  return '';
}

const handleOpen = (row) => {
  emit('modify', row, 'view');
}

watch(() => props.modelValue, () => {
  activeBtn.value = props.modelValue;
})




</script>

<style lang="scss" scoped>
.source-card {
  user-select: none;
  height: calc(100vh - 180px);
  overflow: auto;

  &-wrap {
    display: flex;
    flex-flow: wrap;
  }

  &-item {
    cursor: pointer;
    margin: 0 30px 30px 0;

    > img {
      width: 160px;
      height: 220px;
      border-radius: 10px;
    }

    &-score {
      font-size: 14px;
      width: 160px;
      line-height: 20px;
    }

    &-num {
      color: var(--tc-primary);
      font-weight: 600;
      font-size: 16px;
    }

    &-title {
      color: var(--tc-white);
      margin-left: 4px;
    }

    &-tag {
      width: 160px;
      color: var(--tc-title-sec-color);
      font-size: 12px;
      line-height: 18px;
    }

  }


}
</style>

